<template>
    <div v-html="html">
    </div>
</template>

<script lang='ts'>
import { Component, Vue } from 'vue-property-decorator'
@Component({
    components: {}
})
export default class Print extends Vue {
    html: any = null
    style: any = null
    fileName: string = ''

    getPrintContent () {
        let printContent = JSON.parse(
            (sessionStorage as any).getItem('printContent')
        )
        this.html = printContent.html
        this.style = printContent.style
        this.fileName = printContent.fileName
    }

    print () {
        if (document.querySelector('iframe')) {
            document.body.removeChild(document.querySelector('iframe') as any)
        }
        let iframe: any = document.createElement('iframe')
        document.head.getElementsByTagName('title')[0].innerText = `${this.fileName}`
        document.body.appendChild(iframe)
        this.setIframeStyle()
        let doc = iframe.contentDocument || iframe.contentWindow.document
        doc.head.innerHTML = `
        <meta charset="utf-8">
        <title>${this.fileName}</title>
        <meta name="format-detection" content="telephone=no">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">`
        let content = this.style + this.html
        doc.open()
        doc.write(content)
        doc.close()
        iframe.contentWindow.print()
        // window.close()
    }

    setIframeStyle () {
        let iframe:any = document.querySelector('iframe')
        iframe.style.border = 0
        iframe.style.width = 'calc(100% - 20px)'
        iframe.style.height = window.innerHeight - 4 + 'px'
        iframe.style.marginLeft = '10px'
    }

    mounted () {
        document.body.removeChild(document.getElementById('app') as any)
        this.getPrintContent()
        this.print()
    }
}
</script>

<style lang="stylus" scoped>
</style>
